<template>
    <div class="box">
        <van-nav-bar title="购物车" />
        <van-pull-refresh v-model="loading" @refresh="onRefresh">
            <template v-if="list.length > 0">
                <van-card v-for="(v, i) in list" :key="i" :num="v.num" :price="v.goods_price" :title="v.goods_name"
                    thumb="">
                    <template #thumb>
                        <div style="display: flex;">
                            <van-checkbox v-model="v.checked"></van-checkbox>

                            <lazy-component>
                                <img style="width: 6rem;height: 6rem;"
                                    :src="v.goods_small_logo ? v.goods_small_logo : 'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg'"
                                    alt="">
                            </lazy-component>
                        </div>

                    </template>
                    <template #footer>

                    </template>
                </van-card>

            </template>


            <template v-else>
                <van-empty description="暂无数据" />
            </template>

            <van-submit-bar :price="price * 100" button-text="提交订单" @submit="onSubmit">
                <van-checkbox v-model="checkedAll">全选</van-checkbox>

            </van-submit-bar>

        </van-pull-refresh>
    </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useCounterStore } from '@/stores/counter'
// 在组件内部的任何地方均可以访问变量 `store` ✨
const store = useCounterStore()
let list = ref(store.shopCar)

const checkedAll = computed(() => {
    return list.value.filter((v) => { v.checked = true })

})

const price = computed(() => {
    return 5000
})
import { showToast } from 'vant';
const loading = ref(false);
    const onRefresh = () => {
      setTimeout(() => {
        showToast('刷新成功');
        loading.value = false;

      }, 1000);
    };
</script>

<style lang="scss" scoped>
.van-submit-bar {
    bottom: 5rem;
}
</style>